<template>
	<view class="page index">
		<view class="task-sheet">
			<view class="header">
				<view class="left">
					{{detail.name}}
				</view>
				<view class="right" :style="{color: `${detail.color}`, borderColor: `${detail.color}`}">
					{{detail.statusText}}
				</view>
			</view>
			<view class="details">
				<view class="det-item">
					<view class="tag">
						任务负责人
					</view>
					<view class="value">
						{{detail.ownerUserName}}
					</view>
				</view>
				<view class="det-item">
					<view class="tag">
						任务优先级
					</view>
					<view class="value">
						{{detail.priorityText}}
					</view>
				</view>
				<view class="det-item">
					<view class="tag">
						任务截止日期
					</view>
					<view class="value">
						{{$share.getDate(detail.deadLine)}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<navigator v-if="detail.customerId" :url="`/pages/index/customer/details?id=${detail.customerId}`" hover-class="none" class="list-item">
					<view class="left">
						<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
						<view class="title">
							{{detail.customerName}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#101010"></uni-icons>
					</view>
				</navigator>
				<navigator v-if="detail.projectId" :url="`/pages/index/project/details?id=${detail.projectId}`" hover-class="none" class="list-item">
					<view class="left">
						<span class="iconfont icon" style="color: #ffbf6b;">&#xe604;</span>
						<view class="title">
							{{detail.projectName}}
						</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="20" color="#101010"></uni-icons>
					</view>
				</navigator>
			</view>
		</view>
		<view class="tab-list">
			<view :class="['tab-item', tabIndex == index && 'tab-select']" v-for="(item, index) in tabList" :key="index" @click="tabIndex = index">
				{{item}}
			</view>
		</view>
		<view class="container">
			<task-message v-if="tabIndex == 0" :message="detail"></task-message>
			<task-progress v-if="tabIndex ==1"></task-progress>
		</view>
		<view class="footer">
			<button @click="createProgress">填写任务进度</button>
			<button @click="moreOperation">更多</button>
		</view>
		<!-- 更多操作 -->
		<uni-popup ref="operation" type="center">
			<view class="more-operation">
				<view class="operation-item" v-if="userId == detail.ownerUserId">
					<span class="iconfont icon" style="color: #101010;">&#xe8ac;</span>
					<span>编辑任务</span>
				</view>
				<view class="operation-item" v-if="userId == detail.ownerUserId">
					<span class="iconfont icon" style="color: #101010;">&#xe753;</span>
					<span>作废任务</span>
				</view>
				<view class="operation-item" v-if="detail.status == 1 || detail.status == 3">
					<span class="iconfont icon" style="color: #101010;">&#xe603;</span>
					<span>删除任务</span>
				</view>
				<view class="operation-item" v-if="userId == detail.ownerUserId">
					<span class="iconfont icon" style="color: #101010;">&#xe610;</span>
					<span>移交任务</span>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import taskMessage from "./components/taskMessage.vue";
	import taskProgress from "./components/taskProgress.vue";
	import {getTaskDetailApi} from "@/api/task_api.js";
	export default{
		components: {
			taskMessage,
			taskProgress
		},
		data(){
			return{
				id: 0,
				userId: 0,//当前用户id
				tabList:['基本信息', '任务进度'],
				tabIndex:0,
				detail: {},
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.userId = getApp().globalData.userInfo.id
		},
		onShow() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			this.getTaskDetail();
		},
		methods:{
			// 获取任务详情
			async getTaskDetail(){
				let res = await getTaskDetailApi(this.id).catch(() => {
					uni.hideLoading();
					return Promise.reject();
				})
				let priorityText = "";
				let statusText = "";
				let color = ""
				switch(res.data.priority){
					case 0: {
						priorityText = "极高";
						break;
					}
					case 1: {
						priorityText = "高";
						break;
					}
					case 2: {
						priorityText = "中";
						break;
					}
					case 3: {
						priorityText = "低";
						break;
					}
				}
				switch(res.data.status){
					case 0: {
						statusText = "进行中";
						color = "#3388ff";
						break;
					}
					case 1: {
						statusText = "已完成";
						color = "#3bbf03";
						break;
					}
					case 2: {
						statusText = "已超期";
						color = "#f44444";
						break;
					}
					case 3: {
						statusText = "作废";
						color = "#c9c9c9";
						break;
					}
				}
				this.detail = res.data;
				this.$set(this.detail, 'priorityText', priorityText);
				this.$set(this.detail, 'statusText', statusText);
				this.$set(this.detail, 'color', color);
				await uni.hideLoading();
			},
			createProgress(){
				uni.navigateTo({
					url:'/pages/index/task/createProgress'
				})
			},
			moreOperation(){
				this.$refs.operation.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		padding: 24rpx 28rpx;
		.task-sheet{
			flex: 0 0 auto;
			@include box;
			@include list;
			.bottom{
				padding: 0 0 24rpx;
				.list-item{
					@include flex-r-between-center;
					border-top: #d8d8d8 4rpx solid;
					height: 84rpx;
					.left{
						@include flex-r-start-center;
						.icon{
							font-size: 44rpx
						}
						.title{
							font-size: 32rpx;
							color: #40a4ec;
							padding-left: 20rpx;
							
						}
					}
				}
			}
		}
		.tab-list{
			flex: 0 0 auto;
			@include flex-r-evely-center;
			padding: 34rpx 0 24rpx;
			.tab-item{
				color: #101010;
				font-size: 28rpx;
				text-align: center;
				&::after{
					content: '';
					display: block;
					width: 120rpx;
					height: 6rpx;
					border-radius: 10rpx;
					background-color: transparent;
					margin-top: 10rpx;
				}
				&.tab-select{
					color: #1684fc;
					&::after{
						background-color: #1684fc;
					}
				}
			}
		}
		.container{
			flex: 1 0 0;
			overflow: auto;
			&::-webkit-scrollbar{
				display: none;
			}
		}
		.footer{
			flex: 0 0 auto;
			padding: 24rpx 30rpx 0;
			@include flex-r-between-start;
			button{
				@include button;
				color: #fff;
				width: 45%;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				background-color: #198AFA;
			}
		}
		// 更多操作弹出框样式
		.more-operation{
			width: 400rpx;
			background-color: #fff;
			@include box;
			.operation-item{
				@include flex-r-center-center;
				font-size: 28rpx;
				line-height: 100rpx;
				border-bottom: #d0d0d0 4rpx solid;
				&:last-child{
					border-bottom: none;
				}
				.icon{
					padding-right: 20rpx;
				}
			}
		}
	}
</style>